<template>
        <el-form :rules="rules" :model="form" ref="form" label-width="100px" class="demo-ruleForm">
            
            <el-form-item label="账号" prop="account">
                <el-input v-model="form.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            
            <el-form-item v-if="type==='add'" label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            
            <el-form-item label="用户组" prop="userGroup">
            <el-select label-width="100px" v-model="form.userGroup" placeholder="添加用户组">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通管理员" value="普通管理员"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">{{type==='add'?'添加':'编辑'}}</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
</template>

<script>
// import { userAddReq } from "../../api/account.api.js";

export default {
  props: {
    type: {
      type: String,
      default: "add"
    },
    defaultForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const validateAccount = (rule, value, callback) => {
      if (value.length === 2) {
        callback();
      } else {
        callback(new Error("账号长度必须在2位数以上"));
      }
    };

    return {
      // 表单的数据
      form: {
        account: "",
        password: "",
        userGroupL: ""
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userGroup: [{ required: true, message: "用户组", trigger: "blur" }]
      }
    };
  },
  methods: {
    async submit() {
      // 校验表单
      const validatePass = (rule, value, callback) => {
        let regular = /^[0-9A-Za-z]+$/;
        if (!regular.test(value)) {
          callback(new Error("有字母"));
        }
        var reg = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("有数字和字母"));
        }
      };
      this.$emit("success", this.form);
      //   表单校验之后，把数据发给父组件
      //   const res = await userAddReq(this.form);
    },
    reset() {
      console.log("1111");
      this.$refs.form.resetFields();
    }
  },
  watch: {
    defaultForm: {
      handler: function() {
        this.form = { ...this.defaultForm };
      },
      // deep: true
      immediate: true
    }
  }
};
</script>

<style lang="less" scoped>
</style>